<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="icon">←</text>
          </view>
          <text class="header-title">最近活动</text>
        </view>
        <view class="header-right">
          <view class="header-icon-btn" @click="viewNotifications">
            <text class="fas fa-bell"></text>
            <view class="reward-badge">3</view>
          </view>
          <view class="avatar-container">
            <image 
              class="user-avatar"
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/72612d1c9d3214233aeeedd4c9e4255d.png"
              mode="aspectFill"
            ></image>
            <view class="status-indicator"></view>
          </view>
        </view>
      </view>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 活动分类标签 -->
      <view class="filter-tabs">
        <scroll-view scroll-x="true" class="tabs-scroll" show-scrollbar="false">
          <view class="tabs-container">
            <view 
              v-for="(tab, index) in filterTabs" 
              :key="index" 
              class="tab-item" 
              :class="{ active: activeTab === index }"
              @click="switchTab(index)"
            >
              {{ tab.name }}
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 进行中的活动 -->
      <view class="ongoing-activities">
        <view class="section-header">
          <text class="section-title">进行中活动</text>
          <view class="view-all-btn" @click="viewAllOngoingActivities">
            更多
            <text class="fas fa-angle-right"></text>
          </view>
        </view>

        <view class="activities-list">
          <!-- 活动卡片1：回收挑战 -->
          <view class="activity-card" v-for="activity in ongoingActivities" :key="activity.id">
            <view class="activity-tag" :class="activity.tagClass">{{ activity.tag }}</view>
            <view class="activity-content">
              <image :src="activity.image" class="activity-image" mode="aspectFill"></image>
              <view class="activity-info">
                <text class="activity-title">{{ activity.title }}</text>
                <text class="activity-description">{{ activity.description }}</text>
                <view class="activity-progress">
                  <view class="progress-header">
                    <text class="progress-label">{{ activity.progressLabel }}</text>
                    <text class="progress-value">{{ activity.progressValue }}</text>
                  </view>
                  <view class="progress-bar">
                    <view class="progress-fill" :style="{ width: activity.progressWidth }" :class="activity.progressClass"></view>
                  </view>
                </view>
                <view class="activity-footer">
                  <text class="activity-time">{{ activity.remainingTime }}</text>
                  <text class="activity-action" :class="activity.actionClass" @click="handleActivity(activity)">{{ activity.actionText }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 即将开始的活动 -->
      <view class="upcoming-activities">
        <view class="section-header">
          <text class="section-title">即将开始</text>
          <view class="view-all-btn" @click="viewAllUpcomingActivities">
            更多
            <text class="fas fa-angle-right"></text>
          </view>
        </view>

        <view class="upcoming-grid">
          <view class="upcoming-item" v-for="activity in upcomingActivities" :key="activity.id">
            <view class="upcoming-image-container">
              <image :src="activity.image" class="upcoming-image" mode="aspectFill"></image>
              <view class="upcoming-countdown">
                <text class="countdown-text">{{ activity.countdown }}</text>
              </view>
            </view>
            <view class="upcoming-info">
              <text class="upcoming-title">{{ activity.title }}</text>
              <text class="upcoming-description">{{ activity.description }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 往期活动 -->
      <view class="past-activities">
        <view class="section-header">
          <text class="section-title">往期活动</text>
          <view class="view-all-btn" @click="viewAllPastActivities">
            更多
            <text class="fas fa-angle-right"></text>
          </view>
        </view>

        <view class="past-list">
          <view class="past-item" v-for="activity in pastActivities" :key="activity.id">
            <image :src="activity.image" class="past-image" mode="aspectFill"></image>
            <view class="past-info">
              <text class="past-title">{{ activity.title }}</text>
              <text class="past-description">{{ activity.description }}</text>
            </view>
            <text class="past-status">已结束</text>
          </view>
        </view>
      </view>
    </main>

    <!-- 自定义底部导航栏 -->
    <view class="custom-tab-bar">
      <view class="tab-bar-item" @click="switchToHome">
        <image :src="'/static/home.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">主页</text>
      </view>
      <view class="tab-bar-item" @click="switchToRecord">
        <image :src="'/static/record.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">记录</text>
      </view>
      <view class="tab-bar-item" @click="switchToMine">
        <image :src="'/static/mine.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 活动分类标签
      filterTabs: [
        { name: '全部活动', type: 'all' },
        { name: '回收奖励', type: 'reward' },
        { name: '邀请有礼', type: 'invite' },
        { name: '环保挑战', type: 'challenge' },
        { name: '新手任务', type: 'newbie' }
      ],
      // 当前激活的标签
      activeTab: 0,
      // 进行中的活动数据
      ongoingActivities: [
        {
          id: 1,
          title: '环保回收挑战月',
          description: '每周回收3次可回收物，连续4周即可获得额外50%积分奖励',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/8e386644ecb36e7344ece9a9d18eca56.png',
          tag: '热门',
          tagClass: 'primary',
          progressLabel: '进度',
          progressValue: '3/4周',
          progressWidth: '75%',
          progressClass: 'primary',
          remainingTime: '剩余时间: 7天',
          actionText: '去完成',
          actionClass: 'primary'
        },
        {
          id: 2,
          title: '邀请好友，共获奖励',
          description: '每成功邀请1位好友完成首次回收，双方均可获得10元现金奖励',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/d94ee2a68bec9ba256b56af3401db56f.png',
          tag: '奖励',
          tagClass: 'success',
          progressLabel: '已邀请',
          progressValue: '2/5位',
          progressWidth: '40%',
          progressClass: 'success',
          remainingTime: '剩余时间: 15天',
          actionText: '邀请好友',
          actionClass: 'success'
        },
        {
          id: 3,
          title: '塑料回收特别行动',
          description: '回收塑料瓶类可回收物，重量满5kg即可兑换20元购物券',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/e9c5488178d6ef05c490e1c2b32ad44d.png',
          tag: '',
          tagClass: '',
          progressLabel: '已回收',
          progressValue: '3.2/5kg',
          progressWidth: '64%',
          progressClass: 'warning',
          remainingTime: '剩余时间: 20天',
          actionText: '去回收',
          actionClass: 'warning'
        }
      ],
      // 即将开始的活动数据
      upcomingActivities: [
        {
          id: 4,
          title: '旧衣回收计划',
          description: '捐赠旧衣物可获得双倍积分，同时支持环保事业',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/a4e55c13f693952f55f3a540b6263440.png',
          countdown: '3天后开始'
        },
        {
          id: 5,
          title: '环保知识竞赛',
          description: '参与垃圾分类知识竞赛，赢取丰厚奖品',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/1e4eaf472061b850aa78fa112d2f2e08.png',
          countdown: '10天后开始'
        }
      ],
      // 往期活动数据
      pastActivities: [
        {
          id: 6,
          title: '地球日特别回收活动',
          description: '地球日当天回收可获得三倍积分奖励',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/4be03b99a12f1884e2b09f3ee62bf3dc.png'
        },
        {
          id: 7,
          title: '新年回收挑战',
          description: '新年期间完成7次回收任务获得额外红包',
          image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/9d6eda565738af950a096ebed8517204.png'
        }
      ]
    };
  },
  onLoad() {
    // 页面加载时的初始化
    this.initActivitiesData();
  },
  methods: {
    // 初始化活动数据
    initActivitiesData() {
      // 在实际项目中，这里会从API获取用户活动数据
      console.log('初始化活动数据');
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 查看通知
    viewNotifications() {
      uni.showToast({
        title: '查看通知功能开发中',
        icon: 'none'
      });
    },
    // 切换标签
    switchTab(index) {
      this.activeTab = index;
      // 可以根据选中的标签筛选不同类型的活动
      console.log('切换到标签：', this.filterTabs[index].name);
    },
    // 查看全部进行中活动
    viewAllOngoingActivities() {
      uni.showToast({
        title: '查看全部进行中活动功能开发中',
        icon: 'none'
      });
    },
    // 查看全部即将开始活动
    viewAllUpcomingActivities() {
      uni.showToast({
        title: '查看全部即将开始活动功能开发中',
        icon: 'none'
      });
    },
    // 查看全部往期活动
    viewAllPastActivities() {
      uni.showToast({
        title: '查看全部往期活动功能开发中',
        icon: 'none'
      });
    },
    // 处理活动点击
    handleActivity(activity) {
      uni.showToast({
        title: activity.actionText + '功能开发中',
        icon: 'none'
      });
    },

    // 切换到主页
    switchToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 切换到记录页面
    switchToRecord() {
      uni.switchTab({
        url: '/pages/record/record'
      });
    },
    
    // 切换到我的页面
    switchToMine() {
      uni.switchTab({
        url: '/pages/mine/mine'
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.icon {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  position: relative;
}

.reward-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-container {
  position: relative;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #52c41a;
  border: 4rpx solid #fff;
}

/* 主内容区 */
.main-content {
  padding-top: 120rpx;
  padding: 120rpx 30rpx 30rpx;
}

/* 活动分类标签 */
.filter-tabs {
  margin-bottom: 30rpx;
}

.tabs-scroll {
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  -webkit-overflow-scrolling: touch; /* iOS */
}

.tabs-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.tabs-container {
  display: inline-flex;
  gap: 16rpx;
  padding-bottom: 10rpx;
}

.tab-item {
  padding: 16rpx 40rpx;
  background-color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item.active {
  background-color: #1890ff;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

/* 通用区域样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all-btn {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #1890ff;
}

/* 进行中的活动 */
.ongoing-activities {
  margin-bottom: 40rpx;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.activity-card {
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.activity-tag {
  position: absolute;
  top: 24rpx;
  left: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
  z-index: 10;
}

.activity-tag.primary {
  background-color: #1890ff;
}

.activity-tag.success {
  background-color: #52c41a;
}

.activity-content {
  display: flex;
}

.activity-image {
  width: 180rpx;
  height: 240rpx;
  flex-shrink: 0;
}

.activity-info {
  flex: 1;
  padding: 30rpx 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.activity-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-description {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-progress {
  margin-bottom: 20rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #666;
}

.progress-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.progress-bar {
  width: 100%;
  height: 16rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 1s ease-out;
}

.progress-fill.primary {
  background-color: #1890ff;
}

.progress-fill.success {
  background-color: #52c41a;
}

.progress-fill.warning {
  background-color: #fa8c16;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-time {
  font-size: 24rpx;
  color: #999;
}

.activity-action {
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.activity-action.primary {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.activity-action.success {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.activity-action.warning {
  background-color: rgba(250, 140, 22, 0.1);
  color: #fa8c16;
}

/* 即将开始的活动 */
.upcoming-activities {
  margin-bottom: 40rpx;
}

.upcoming-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
}

.upcoming-item {
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.upcoming-image-container {
  position: relative;
}

.upcoming-image {
  width: 100%;
  height: 200rpx;
}

.upcoming-countdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-text {
  color: #fff;
  font-size: 24rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
}

.upcoming-info {
  padding: 24rpx;
}

.upcoming-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upcoming-description {
  font-size: 24rpx;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 往期活动 */
.past-activities {
  margin-bottom: 40rpx;
}

.past-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.past-item {
  background-color: #fff;
  border-radius: 30rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.past-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.past-info {
  flex: 1;
  min-width: 0;
}

.past-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.past-description {
  font-size: 24rpx;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.past-status {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

/* 自定义底部导航栏样式 */
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  height: 100%;
}

.tab-bar-icon {
  width: 52rpx;
  height: 52rpx;
  margin-bottom: 8rpx;
}

.tab-bar-text {
  font-size: 24rpx;
  color: #8f8f94;
}
</style>